<template>
  <div class="row fit q-pa-sm">
    <div class="col-3">
      <q-scroll-area class="full-height">
        <div class="column">
          <div class="q-px-sm q-py-md flex flex-center">
            <q-btn color="primary" label="保存角色菜单" />
          </div>
          <div class="q-pt-sm">
            <q-tree
              :nodes="simple"
              node-key="label"
              selected-color="primary"
              v-model:selected="selected"
              v-model:ticked="ticked"
              v-model:expanded="expanded"
              tick-strategy="leaf"
              default-expand-all
            />
          </div>
        </div>
      </q-scroll-area>
    </div>
    <div class="col-5 q-px-sm">
      <q-scroll-area class="full-height">
        <q-table square :rows="roleData" :columns="roleColumns" row-key="id">
          <template v-slot:body-cell-oper="props">
            <q-td :props="props">
              <q-btn size="xs" color="primary" label="修改" flat />
              <q-btn size="xs" color="deep-orange" label="删除" flat />
            </q-td>
          </template>
          <template v-slot:top-right>
            <q-input v-model="roleQy" dense type="text" label="搜索" />
          </template>
          <template v-slot:top-left>
            <q-btn color="primary" label="新增" />
          </template>
        </q-table>
      </q-scroll-area>
    </div>
    <div class="col-4 q-px-sm">
      <q-scroll-area class="full-height">
        <q-table :rows="userData" :columns="userColumns" row-key="id">
          <template v-slot:top-left>
            <q-btn color="primary" label="分配角色" />
          </template>
        </q-table>
      </q-scroll-area>
    </div>
  </div>
</template>

<script setup lang="ts">
import { QTableProps } from 'quasar';
import { ref } from 'vue';
import { roleList, userList } from './data/list';
const roleData = roleList;
const userData = userList;
const roleColumns: QTableProps['columns'] = [
  { name: 'name', field: 'name', label: '角色名称' },
  { name: 'code', field: 'code', label: '角色编码' },
  { name: 'reamrk', field: 'reamrk', label: '备注' },
  { name: 'oper', field: 'oper', label: '操作' },
];
const userColumns: QTableProps['columns'] = [
  { name: 'name', field: 'name', label: '用户名称' },
  { name: 'loginNo', field: 'loginNo', label: '用户帐号' },
  { name: 'status', field: 'status', label: '状态' },
];
const roleQy = ref('');
const selected = ref('');
const ticked = ref([]);
const expanded = ref([]);

const simple = [
  {
    label: '系统管理',
    children: [
      {
        label: '菜单管理',
        icon: 'restaurant_menu',
      },
      {
        label: '用户管理',
        icon: 'room_service',
      },
      {
        label: '角色管理',
        icon: 'photo',
      },
    ],
  },
  {
    label: '组件展示',
    children: [
      {
        label: '表格',
        icon: 'restaurant_menu',
      },
      {
        label: '按钮',
        icon: 'room_service',
      },
      {
        label: '列表',
        icon: 'photo',
      },
    ],
  },
];
</script>
